import React from 'react';
import $ from 'jquery';

class NavLeft extends React.Component{  
  static propTypes: {
    markRegionsToMap: PropTypes.func.isRequired
  }
  constructor(props) {
    super(props);    

    this.state = {
        regions: []
    }
    
  }

  loadRegionData() {
    var that = this;
    $.ajax('/src/data/data-region.json')
    .done(function(data){
        that.setState({
            regions: data.result
        });
        that.props.markRegionsToMap(data.result)
    });
  }

  render() {
    var lists = [];
    if(this.state.regions.length>0) {
         var li = this.state.regions.map(function(region){
            lists.push(<li key={region.id}>{region.name}</li>);
         });
      }
    return (
      <div className="nav-vertical" id="navvertical">
        <button onClick={this.loadRegionData.bind(this)}>查询区划数据</button>
        <ul>
          {lists}
        </ul>
      </div>
    );
  }
};

export default NavLeft;




